<style  scoped>
.icon-delete {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  color: red;
}
.radio-type {
  position: absolute;
  right: 50px;
  top: 0px;
}
.demo-split {
  height: 650px;
  border: 1px solid #dcdee2;
}
.left-pane .split-pane-left {
  padding: 10px;
  background: #fff;
}
.tdEpi .ivu-table-cell {
  padding-left: 2px !important;
  padding-right: 2px !important;
}
</style>

<template>
  <div>
    <Card class="margin-bottom-10">
      <Row ref="card" :gutter="16">
        <Col span="6">
          <Input size="large" v-model="str" placeholder="图片库名称" />
        </Col>
        <Col span="14">
          <Button
            size="large"
            type="primary"
            icon="ios-search"
            v-on:click="
              pPage = 1;
              SearchPhotoGroup();
            "
            >查询</Button
          >
        </Col>
        <Col span="4" style="text-align: right">
          <Button
            size="large"
            type="primary"
            icon="ios-add"
            @click="
              clearWord();
              modalWord = true;
            "
            >添加图片库</Button
          >
        </Col>
      </Row>
    </Card>
    <Modal :mask-closable="false" v-model="modalWord" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>添加图片库</span>
      </p>
      <Form
        :model="wordTemp"
        ref="formItem"
        :label-width="100"
        :rules="ruleValidate"
      >
        <FormItem label="图片库名称" prop="Name">
          <Input v-model="wordTemp.Name" />
        </FormItem>
      </Form>

      <div slot="footer">
        <Button
          :loading="loading2"
          type="primary"
          size="large"
          @click="AddPhotoGroup()"
          >保存</Button
        >
      </div>
    </Modal>
    <Table
      border
      :loading="loading"
      :columns="tableTitle"
      :data="tableData"
      ref="table"
      :height="tableHeight"
    ></Table>

    <Row class="margin-top-10">
      <Page
        :total="total"
        :current="pPage"
        :page-size="pSize"
        :page-size-opts="[50, 100, 300, 500, 1000, 2000, 5000]"
        @on-change="
          (s) => {
            pPage = s;
            SearchPhotoGroup();
          }
        "
        @on-page-size-change="
          (p) => {
            pSize = p;
            pPage = 1;
            SearchPhotoGroup();
          }
        "
        show-total
        show-sizer
      />
    </Row>
  </div>
</template>
<script>
import dayjs from "dayjs";
import excel from "@/libs/excel";
import { Message, Modal } from "view-design";
import Refresh from "@/components/refresh";
import { hasOneOf } from "@/libs/tools";
import {
  SearchPhotoGroup,
  AddPhotoGroup,
} from "@/api/work";
import { getToken, baseUrl } from "@/libs/util";
export default {
  name: "photogroup",
  data() {
    return {
      modalWord: false,
      loading: false,
      loading2: false,
      exportLoading: false,
      tableHeight: 450,
      uploading: false,
      areaList: [],

      tableTitle: [
        { title: "序号", key: "R_INDEX", width: 80, align: "center" },
       
        { 
        title: "图片库名称",
        key: "Name",
        align: "center",
        minWidth: 300,
        render: (h, params) => {
          return h("div", [
            h(
              "a",
              {
                style: {
                  fontSize: "16px",
                  textAlign: "left", 
                  float: "left"
                },
                on: {
                  click: () => {
                    this.$router.push({
                      name: "photodetail",
                      params: {
                        id: params.row.Gid,
                        name: params.row.Name 
                      }
                    });
                  }
                }
              },
              params.row.Name
            )
          ]);
        }
      },
           
         
      ],
      tableData: [],
      total: 0,
      pPage: 1,
      pSize: 50,
      str: "",
      areaid: "",
      AreaList: [],
      wordTemp: {
        Name: "",
      },

      ruleValidate: {
        Name: [
          {
            required: true,
            message: "不能为空",
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    clearWord() {
      this.wordTemp = {
        Name: "",
      };
    },
    SearchPhotoGroup() {
      let vm = this;
      vm.loading = true;
      var reqData = {
        str: vm.str,
        page: vm.pPage,
        size: vm.pSize,
      };
      SearchPhotoGroup(reqData).then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          Message.error(data.Message);
        }
        vm.loading = false;
      });
    },

    AddPhotoGroup() {
      let vm = this;
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          vm.loading2 = true;
          AddPhotoGroup(vm.wordTemp).then((res) => {
            const data = res.data;
            if (data.Type == 1) {
              vm.modalWord = false;
              this.SearchPhotoGroup();
              this.$Message.success({ title: "提示", content: "保存成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
            vm.loading2 = false;
          });
        }
      });
    },
  },
  created() {},
  mounted() {
    let vm = this;
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 260; 
    this.SearchPhotoGroup();
  },
};
</script>
